import React from "react";
import { Button } from "antd";
import { PlayCircleOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";

const HeroSection = () => {
  const navigate = useNavigate();
  
  return (
    <section className="py-10 bg-gradient-to-br from-primary-50 to-secondary-50 dark:from-gray-800 dark:to-gray-900">
      <div className="container mx-auto px-4">
        <div className="flex flex-col md:flex-row items-center">
          <div className="md:w-1/2 mb-10 md:mb-0 fade-in">
            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
              AI智能图像风格转换平台
            </h1>
            <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
              简单易用的在线工具，一键将您的图片转换为各种艺术风格。无需专业知识，体验AI图像处理的无限可能。
            </p>

            <div className="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
              <Button
                type="primary"
                size="large"
                icon={<PlayCircleOutlined />}
                className="btn-hover"
                onClick={() => navigate('/product')}
              >
                立即体验
              </Button>
              <Button
                size="large"
                icon={<InfoCircleOutlined />}
                className="btn-hover"
                href="#features"
              >
                了解更多
              </Button>
            </div>
          </div>

          <div className="md:w-1/2 fade-in">
            <div className="relative max-w-md mx-auto">
              <div className="absolute -top-6 -left-6 w-32 h-32 bg-secondary-400 rounded-lg opacity-20 animate-pulse"></div>
              <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-primary-400 rounded-lg opacity-20 animate-pulse delay-300"></div>

              <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transform rotate-1">
                <div className="p-4 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center">
                  <div className="flex space-x-2">
                    <div className="w-3 h-3 rounded-full bg-red-500"></div>
                    <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                    <div className="w-3 h-3 rounded-full bg-green-500"></div>
                  </div>
                  <div className="ml-4 text-sm text-gray-500 dark:text-gray-400">
                    图灵画匠 - 风格转换
                  </div>
                </div>

                <div className="p-6">
                  <div className="mb-4 flex justify-between items-center">
                    <div className="text-sm font-medium text-gray-500 dark:text-gray-400">
                      原图
                    </div>
                    <div className="text-sm font-medium text-gray-500 dark:text-gray-400">
                      新海诚风格
                    </div>
                  </div>

                  <div className="flex space-x-4">
                    <div className="w-1/2 border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                      <div className="aspect-square bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                        <i className="fas fa-mountain text-3xl text-gray-400 dark:text-gray-500"></i>
                      </div>
                    </div>
                    <div className="w-1/2 border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                      <div className="aspect-square bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
                        <i className="fas fa-mountain-sun text-3xl text-white"></i>
                      </div>
                    </div>
                  </div>

                  <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <div className="flex justify-between items-center">
                      <div className="text-sm text-gray-500 dark:text-gray-400">
                        处理时间: 12秒
                      </div>
                      <button className="text-sm flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300">
                        <i className="fas fa-download mr-1"></i> 下载
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;
